<template>
    <div class="advice">
      <HomePagetop :list="list"></HomePagetop>
      <van-form @submit="onSubmit">
        
        <div class="radio">
          <div class="leixing">请选择反馈类型<i>*</i></div>
          <div class="radio-check">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">垃圾广告</van-radio>
              <van-radio name="2">有害信息</van-radio>
              <van-radio name="3">涉嫌侵权</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="advice_text">
          <div>
            <van-field
              v-model="message"
              rows="4"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入正文"
              show-word-limit
            />
            </div>
          <div class="upLoadImg">
            <van-uploader 
            v-model="fileList" 
            :after-read="afterRead"
            multiple :max-count="3" />
          </div>
        </div>
        <div class="upLoadtitle">
          <div class="upLoadtitle_email">联系放式</div>
          <input type="email" v-model="value" placeholder="请留下您的联系邮箱">
        </div>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    
     
    </div>
</template>
<script>
import HomePagetop from "@/components/homePage_top";
import Vue from "vue";
import { Form, RadioGroup, Radio,Field,Uploader,Button } from "vant";
Vue.use(Form);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Field);
Vue.use(Uploader);
Vue.use(Button);
export default {
  data() {
    return {
      radio: "0",
      message:"",
      value:"",
      fileList:[],
      list: {
        hp_top: true,
        i_cont: "",
        user_name: "反馈建议",
      },
    };
  },
  components: {
    HomePagetop,
  },
  methods: {
    onSubmit() {},
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file.content);
      // this.aa=file.content;
      
      console.log(this.fileList);
    },
    
  },
};
</script>
<style lang="stylus" scoped>
.advice 
  height: 100%;
  background-color: #f2f2f2;

  .radio 
    height: 1rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding-left: 4%;

    .leixing 
      background-color: #fff;

      i 
        color: red;
      
   

    .radio-check 
      margin-top: 8%;
  .advice_text
    margin-top .1rem

    .upLoadImg
      width 100%
      background-color #fff
      padding-left 4%
  .upLoadtitle
    background-color #fff
    margin-top .1rem
    .upLoadtitle_email
      font-size .16rem
      padding 2% 0 2% 4%
    input 
      display inline-block
      border none
      padding 2% 2% 2% 4%
      font-size .16rem

</style>